<template>
  <el-card class="me-area" :body-style="{ padding:'16px' }">
    <div class="me-article-header">
      <a @click="view(id)" style="cursor: pointer;"
         class="me-article-title">{{ title }}</a>
<!--      <el-button v-if="weight > 0" class="me-article-icon" type="text">置顶-->
<!--      </el-button>-->
<!--      <span class="me-pull-right me-article-count"><i-->
<!--          class="me-icon-comment"></i>&nbsp;{{ commentCounts }}-->
<!--      </span>-->
<!--      <span class="me-pull-right me-article-count">-->
<!--        <i class="el-icon-view"></i>&nbsp;{{ viewCounts }}-->
<!--      </span>-->

    </div>
    <div class="me-article-description">
      {{ summary }}
    </div>
    <div class="me-article-footer">
      <span class="me-article-author"><i class="me-icon-author"></i>&nbsp;{{
          authorId
        }}
      </span>

      <!--      <el-tag v-for="t in tags" :key="t.tagname" size="mini" type="success">-->
      <!--        {{ t.categoryId }}-->
      <!--      </el-tag>-->

      <span class="me-pull-right me-article-count"><i class="el-icon-time"></i>&nbsp;{{
          format(createDate)
        }}
      </span>

    </div>
  </el-card>
</template>

<script>
import {formatTime} from "@/utils/time";

export default {
  name: 'ArticleItem',
  props: {
    id: Number,
    title: String,
    summary: String,
    authorId: Number,
    createDate: Number,
    categoryId: Number,
    content: String,

    // bodyId: Number,
    // weight: Number,
    // commentCounts: Number,
    // viewCounts: Number,
  },
  data() {
    return {}
  },
  methods: {
    view(id) {
      this.$router.push({path: `/article/view/${id}`})
    },
    format(date) {
      formatTime(date)
    }
  }
}
</script>

<style scoped>

.me-article-header {
  /*padding: 10px 18px;*/
  padding-bottom: 10px;
}

.me-article-title {
  font-weight: 600;
}

.me-article-icon {
  padding: 3px 8px;
}

.me-article-count {
  color: #a6a6a6;
  padding-left: 14px;
  font-size: 13px;
}

.me-pull-right {
  float: right;
}

.me-article-description {
  font-size: 13px;
  line-height: 24px;
  margin-bottom: 10px;
}

.me-article-author {
  color: #a6a6a6;
  padding-right: 18px;
  font-size: 13px;
}

.el-tag {
  margin-left: 6px;
}

</style>
